import { PageContainer } from '@ant-design/pro-layout';
import { useRef, useState } from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import ProForm, { ModalForm, ProFormText, ProFormRadio, ProFormDigit } from '@ant-design/pro-form';
import { Button, message, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons/lib/icons';
import { createCountry, deleteCountry, queryContries, updateCountry } from '@/services/ant-design-pro/api';
import { useAccess } from 'umi';


export default () => {
    const actionRef = useRef<ActionType>();
    const [createModalVisible, handleModalVisible] = useState<boolean>(false);
    const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState<any>();
    const access = useAccess();

    const tableRequest = async () => {
        let userResp: any = await queryContries();
        return {
            data: userResp.data,
            success: true,
        }
    }
    const columns: ProColumns<AnalyserNode>[] = [
        {
            title: 'ID',
            dataIndex: 'id',
            editable: false,
        },
        {
            title: '国家',
            dataIndex: 'name',
        },
        {
            title: '编码',
            dataIndex: 'code',
        },
        {
            title: '备注',
            dataIndex: 'comment',
        },
        {
            title: '最低接单价',
            dataIndex: 'limit_price',
            valueType: 'digit',
            editable: access.isSuperAdmin,
        },
        {
            title: '成本价',
            dataIndex: 'cost_price',
            valueType: 'digit',
            editable: access.isSuperAdmin,
        },
        {
            title: '操作',
            valueType: 'option',
            render: (text, record, _, action) => access.isSuperAdmin && [
                <a
                    key="editable"
                    onClick={() => {
                        handleUpdateModalVisible(true);
                        setCurrentRow(record);
                    }}
                >
                    编辑
                </a>,
                <a
                    key="delete"
                    onClick={(item) => {
                        Modal.confirm({
                            title: <h3>提示</h3>,
                            content: "确认删除国家 " + record.name + "?",
                            onOk: async () => {
                                let result = await deleteCountry(record)
                                if (result.code == 0) {
                                    message.success("删除成功");
                                    actionRef.current?.reload();
                                }
                            }
                        })

                    }}
                >
                    删除
                </a>,
            ],
        },
    ];
    return <PageContainer>
        <ProTable<any>
            actionRef={actionRef}
            rowKey="id"
            columns={columns}
            request={tableRequest}
            search={false}
            toolBarRender={() => access.isSuperAdmin && [
                <Button
                    type="primary"
                    key="primary"
                    onClick={() => {
                        handleModalVisible(true);
                    }}
                >
                    <PlusOutlined />新建
                </Button>,
            ]}
        />
        <Modal
            title="编辑数据"
            visible={updateModalVisible}
            onCancel={() => {
                handleUpdateModalVisible(false)
            }}
            onOk={() => { }}
            okText="确认"
            cancelText="取消"
            destroyOnClose={true}
            footer={null}
        >
            <ProForm onFinish={async (values: any) => {
                let result = await updateCountry(values)
                if (result.code == 0) {
                    handleUpdateModalVisible(false)
                    actionRef.current?.reload();
                    message.success("更新成功")
                }
            }}>
                <ProFormText name="id" width="md" label="ID" initialValue={currentRow?.id} disabled
                    rules={[{ required: true }]}
                />
                <ProFormText name="name" width="md" label="国家" initialValue={currentRow?.name}
                    rules={[{ required: true }]}
                />
                <ProFormText name="code" width="md" label="编码" initialValue={currentRow?.code}
                    rules={[{ required: true }]}
                />
                <ProFormDigit label="最低接单价" name="limit_price" width="md" initialValue={currentRow?.limit_price} />
                <ProFormDigit label="成本价" name="cost_price" width="md" initialValue={currentRow?.cost_price} />
                <ProFormText label="备注" name="comment" width="md" initialValue={currentRow?.comment} />
            </ProForm>
        </Modal>

        <ModalForm
            title={"添加订单"}
            width="400px"
            visible={createModalVisible}
            onVisibleChange={handleModalVisible}
            onFinish={async (value) => {
                const result = await createCountry(value);
                if (result.code == 0) {
                    handleModalVisible(false);
                    if (actionRef.current) {
                        actionRef.current.reload();
                    }
                }
            }}
        >
            <ProFormText name="name" width="md" label="国家"
                rules={[{ required: true }]}
            />
            <ProFormText name="code" width="md" label="编码"
                rules={[{ required: true }]}
            />
            <ProFormDigit label="限制最低价" name="limit_price" width="md" min={0} rules={[{ required: true }]} />
            <ProFormDigit label="成本价" name="cost_price" width="md" rules={[{ required: true }]} />
            <ProFormText label="备注" name="comment" width="md" />
        </ModalForm>
    </PageContainer>
};